<template>
	<view class="invoice-pop">
		<u-popup :show="showFapiao" mode="bottom" @close="showFapiao=false" :safeAreaInsetBottom="true" width="100%"
			border-radius="24">
			<view class="invoice-ctx fapiao-poup">
				<view class="title">
					开具发票
				</view>
				<view class="fapiao-type">
					<text>发票类型</text>
					<text>开具发票在个人中心-我的发票查看</text>
				</view>
				<view class="type-list">
					<view class="type-item " :class="params.invoiceStatus==0?'active':''" @click="params.invoiceStatus=0">
						不开票
					</view>
					<view class="type-item" :class="(params.invoiceStatus==1 && params.invoiceType==1)?'active':''"
						@click="pupiaoClick">
						普通发票
					</view>
					<view class="type-item" :class="(params.invoiceStatus==1 && params.invoiceType==2)?'active':''"
						@click="zhuanpiaoClick">
						专用发票
					</view>
				</view>

				<block v-if="params.invoiceStatus==1">
					<view class="fapiao-taitou">
						发票抬头
					</view>
					<view class="taitou-box">
						<view class="taitou" v-if="params.invoiceType==1" @click="typeChange(1)"
							:class="params.titleType==1?'active':''">
							个人
						</view>
						<view class="taitou" @click="typeChange(2)" :class="params.titleType==2?'active':''">
							单位
						</view>
					</view>
					<view class="personal" v-if="params.titleType==1">
						<text>个人名称</text>
						<input v-model="params.title" placeholder="请填写“个人”或您的姓名" placeholder-class="place" />
					</view>
					<view class="company" v-if="params.titleType==2">
						<view class="company-item">
							<view>单位名称</view>
							<input v-model="params.title" placeholder="请填写单位名称" placeholder-class="place" />
						</view>
						<view class="company-item">
							<view>纳税人识别码</view>
							<input v-model="params.shibiema" placeholder="请填写纳税人识别码" placeholder-class="place" />
						</view>
						<view class="company-item" v-if="params.invoiceType==2">
							<view>注册地址</view>
							<input v-model="params.companyAddress" placeholder="请填写注册地址" placeholder-class="place" />
						</view>
						<view class="company-item" v-if="params.invoiceType==2">
							<view>注册电话</view>
							<input v-model="params.companyPhone" placeholder="请填写注册电话" placeholder-class="place" />
						</view>
						<view class="company-item" v-if="params.invoiceType==2">
							<view>开户银行</view>
							<input v-model="params.bankName" placeholder="请填写开户银行" placeholder-class="place" />
						</view>
						<view class="company-item" v-if="params.invoiceType==2">
							<view>银行账户</view>
							<input v-model="params.bankNo" placeholder="请填写银行账户" placeholder-class="place" />
						</view>
					</view>
				</block>


				<view class="invoice-bottom" @click="doConfirm()">
					<view class="btn flex-center">
						立即申请
					</view>
				</view>
			</view>
		</u-popup>



	</view>
</template>

<script>
	export default {
		name: "invoice-pop",
		// props: {
		// 	isOrder: {
		// 		type: Boolean,
		// 		default: false
		// 	}
		// },
		data() {
			return {
				showFapiao: false,
				params: {
					invoiceStatus: 0,
					invoiceType: 1, //发票类型：1普通 2专用
					titleType: 2, //抬头类型：1 个人 2-公司
					title: '', //公司名称
					shibiema: '', //识别码
					companyAddress: '', //注册地址
					companyPhone: '', //注册电话
					bankName: '', //开户银行
					bankNo: '', //银行账户
				}
			}
		},

		created() {
			// console.log(this.showFapiao, '发票')
			// if (this.$props.isOrder == true) {
			// 	this.showFapiao = true
			// }

			let fapiao = uni.getStorageSync('fapiao_info')
			if (fapiao) {
				this.params.title = fapiao.title
				this.params.shibiema = fapiao.shibiema
				this.params.companyAddress = fapiao.companyAddress
				this.params.companyPhone = fapiao.companyPhone
				this.params.bankName = fapiao.bankName
				this.params.bankNo = fapiao.bankNo
			}
		},
		methods: {
			init() {
				this.showFapiao = true;
			},
			typeChange(type) {
				this.params.titleType = type
				this.params.title = ''
			},
			pupiaoClick() {
				this.params.invoiceStatus = 1
				this.params.invoiceType = 1

			},
			zhuanpiaoClick() {
				this.params.invoiceStatus = 1
				this.params.invoiceType = 2
			},
			doConfirm() {
				if (this.params.invoiceStatus == 1) {

					if (this.params.invoiceType == 1) { //普通发票
						if (this.params.titleType == 1) { //如果是个人
							if (!this.params.title) {
								this.$alert('请填写“个人”或您的姓名')
								uni.setStorageSync('fapiao_info', this.params)
								return;
							}
						} else {
							if (!this.params.title) {
								this.$alert('请填写单位名称')
								return;
							}
							if (!this.params.shibiema) {
								this.$alert('请填写纳税人识别码')
								return;
							}
							this.params.companyAddress = ''
							this.params.companyPhone = ''
							this.params.bankName = ''
							this.params.bankNo = ''
							uni.setStorageSync('fapiao_info', this.params)
						}
					}
					if (this.params.invoiceType == 2) {
						if (!this.params.title) {
							this.$alert('请填写单位名称')
							return;
						}
						if (!this.params.shibiema) {
							this.$alert('纳税人识别码')
							return;
						}
						if (!this.params.companyAddress) {
							this.$alert('请填写注册地址')
							return;
						}
						if (!this.params.companyPhone) {
							this.$alert('请填写注册电话')
							return;
						}
						if (!this.params.bankName) {
							this.$alert('请填写开户银行')
							return;
						}
						uni.setStorageSync('fapiao_info', this.params)
					}
				} else {
					this.params = {}
					this.params.invoiceStatus = 0
				}
				this.showFapiao = false
				this.$emit('confirm', this.params)
			},
			openPop() {

			},
			closePop() {
				this.show = false;
			},
			close_pop() {
				this.show = false;
			},


		},
	}
</script>


<style lang="scss">
	.yue-hexiao-modal .input-box input {
		height: 112rpx;
	}

	.yue-hexiao-modal .u-input__content {
		height: 112rpx;
	}

	.yue-hexiao-modal .u-input__content__field-wrapper__field {
		height: 112rpx;
	}
</style>

<style lang="scss" scoped>
	::v-deep .u-popup__content {
		// border-radius: 32rpx 32rpx 32rpx 32rpx;
		background: transparent;
	}

	::v-deep .u-input__content__field-wrapper__field {
		height: 112rpx;
	}





	.fapiao-box {
		height: 92rpx;
		line-height: 92rpx;
		background: #FFFFFF;
		margin-top: 16rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 0 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		>text {
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
		}

		.fapiao-right {
			image {
				width: 14rpx;
				height: 24rpx;
				margin-left: 24rpx;
			}

			text {
				font-size: 28rpx;
				color: #000000;
			}
		}
	}


	.pay_type {
		margin-top: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
		width: 686rpx;
		height: 92rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 26rpx 24rpx;

		.pay_type_right {
			display: flex;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}



	.invoice-ctx {
		position: relative;
	}

	.fapiao-poup {
		padding: 22rpx 32rpx 220rpx 32rpx;
		min-height: 800rpx;
		background: #fff;

		.title {
			font-size: 32rpx;
			color: #000000;
			text-align: center;
			font-weight: bold;
		}

		.fapiao-type {
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			text {
				&:nth-child(1) {
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
				}

				&:nth-child(2) {
					font-size: 20rpx;
					color: #000000;
				}
			}
		}

		.type-list {
			display: flex;
			margin-top: 18rpx;

			.type-item {
				width: 218rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				background: #F6FAFD;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-size: 24rpx;
				color: #000000;
				margin-right: 16rpx;

				&:nth-child(3n) {
					margin-right: 0;
				}
			}

			.active {
				width: 218rpx;
				height: 64rpx;
				background: #CB0011;
				box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				color: #FFFFFF;

			}
		}

		.fapiao-taitou {
			margin-top: 34rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #000000;
		}

		.taitou-box {
			display: flex;
			align-items: center;
			margin-top: 18rpx;

			.taitou {
				width: 218rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				background: #F6FAFD;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				margin-right: 16rpx;
				font-size: 24rpx;
				color: #000000;
			}

			.active {
				width: 218rpx;
				height: 64rpx;
				background: #CB0011;
				box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				color: #FFFFFF;
			}
		}

		.personal {
			margin-top: 34rpx;
			display: flex;
			align-items: center;

			text {
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
				margin-right: 40rpx;
			}

			.place {
				font-size: 24rpx;
				color: #AEAEAE;
			}

			input {
				flex: 1;
				font-size: 24rpx;
				color: #AEAEAE;
			}
		}

		.company {
			margin-top: 34rpx;

			.company-item {
				display: flex;
				align-items: center;
				margin-bottom: 28rpx;
				font-size: 24rpx;

				view {
					min-width: 200rpx;
				}

				input {
					flex: 1;
				}
			}
		}



		.invoice-bottom {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 16rpx 32rpx;
			box-shadow: 0rpx -8rpx 20rpx 2rpx rgba(0,0,0,0.06);

			.btn {
				width: 100%;
				height: 80rpx;
				background: #CB0011;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
</style>